<template>
  <div class="detailinfo">
    <my-head title="个人中心" :go="true" :ri="false"></my-head>
      
    <div class="content">
      <div class="list">

        <div class="item">
          <div class="msg">
            <span>头像</span>
            <div class="titimg">
              <img src="@/assets/logo.png" alt="">
            </div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jiantou"></use>
            </svg>
          </div>
        </div>
        <div class="item">
          <div class="msg" @click="goto('modify',userinfo.userid)">
            <span>昵称</span>
            <div>{{userinfo.nickname}}</div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jiantou"></use>
            </svg>
          </div>
        </div>
        <div class="item">
          <div class="msg">
            <span>注册手机号</span>
            <div>{{userinfo.registertel}}</div>
            <!-- <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jiantou"></use>
            </svg> -->
          </div>
        </div>
        <div class="item">
          <div class="msg" @click="goto('detailed',userinfo.userid)">
            <span>详细资料</span>
            <div></div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jiantou"></use>
            </svg>
          </div>
        </div>

      </div>
      <div class="list">

        <div class="item">
          <div class="msg" @click="goto('openaccount')">
            <span>开户</span>
            <div>存款账户、银行卡等</div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jiantou"></use>
            </svg>
          </div>
        </div>
        <div class="item">
          <div class="msg" @click="goto('password',userinfo.userid)">
            <span>密码管理</span>
            <div>登录密码、交易密码等</div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jiantou"></use>
            </svg>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import Head from '@/components/Head'
export default {
  data(){
    return {
      userinfo:{}
    }
  },
  components:{
    myHead:Head
  },
  created(){
    var id = this.$route.query.id

    this.$http.get("../../../static/json/user.json").then((res)=>{
      console.log(res.data.userinfo)
      var userinfo = res.data.userinfo
      for(var i =0;i<userinfo.length;i++){
        if(id == userinfo[i].userid){
          this.userinfo = userinfo[i]
          console.log(this.userinfo)
        }
      }
    })
  },
  methods:{
    goto(val,id){
      if(id){
        this.$router.push({path:"/"+val,query:{id:id}})
      }else{
        this.$router.push({path:"/"+val})
      }
    }
  }
}
</script>

<style scoped lang="less">
  .detailinfo{
    flex: 1;
    display: flex;
    flex-direction: column;
    .content{
      flex: 1;
      background: #f4f4f4;
      .list{
        margin-top: 0.11rem;
        
        .item{
          background: #fff;
          padding: 0 .16rem;
          .msg{
            padding: 0.18rem 0;
            border-bottom: 1px solid #ebebeb;
            display: flex;
            flex-direction: row;
            span{
              flex: 1;
              font-size: 0.16rem;
            }
            div{
              height: 100%;
              color: #c3c3c3;
              position: relative;
              img{
                position: absolute;
                top: -0.05rem;
                left: -0.3rem;
                display: block;
                width: .3rem;
                height: .3rem;
                border-radius: 50%;
              }
            }
            
            .icon{
              font-size: 0.17rem;
            }
          }
        }
        .item:last-child{
          .msg{
            border: 0;
          }
        }
      }
    }
  }
</style>
